.article_content
  %h2.clearfix 
    = params[:name]
    %span{:style => "margin-right:10px;"}= link_to "Back", :back
  .article_summary
  / article_summary div just for show ajax successful information.
.left
  %ul.recipes_list
    %li
      = @recipe.name
      %ul.connectedSortable.ready_for_sort
        = show_article_list(@recipe.articles)
.right
  %ul.articles_ready_for_sort
    - @categories.each do |category|
      %li
        = category.name
        %ul.connectedSortableForDrop.ready_for_sort
          = show_article_list(category.articles.ready_for_sort)
:javascript
  $(function(){
    setupAjax();
    $( ".articles_ready_for_sort ul" ).sortable({
      connectWith: ".connectedSortable",
    }).disableSelection();
    $( ".recipes_list ul" ).sortable({
      connectWith: ".connectedSortableForDrop",
  		update: function(event, ui) {	
        serial = $('.recipes_list ul.connectedSortable').sortable("serialize");
        $.ajax({
          url: "#{url_for(:action => "update_sortable", :id => @recipe.id)}", 
          type: "post", 
          data: serial,
          error: function(){ alert("theres an error with AJAX"); },
          dataType: "script"
        });
  		}      
    }).disableSelection();    
  })